<template>
  <div>
    <h1>TsCard</h1>
    <button @click="num++">{{ num }}</button>
  </div>
</template>
<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue';

const num = ref(0)

onBeforeMount(() => {
  console.log('onBeforeMount');
});

onMounted(() => {
  console.log('onMounted');
});


onBeforeUpdate(() => {
  console.log('onBeforeUpdate');
});

onUpdated(() => {
  console.log('onUpdated');
});

onUnmounted(() => {
  console.log('onUnmounted');
});

onBeforeUnmount(() => {
  console.log('onBeforeUnmount');
});







</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>